<template>
  <div class="flex flex-col gap-3 flex-1">
    <!-- 筛选条件 -->
    <div class="bg-white p-3 rounded-lg">
      <el-form :inline="true" :model="searchForm" class="flex flex-wrap gap-3">
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
          />
        </el-form-item>
        <el-form-item label="营销活动" class="w-1/5">
          <el-select v-model="searchForm.campaign" placeholder="请选择活动" clearable>
            <el-option
              v-for="item in campaigns"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="营销渠道" class="w-1/5">
          <el-select v-model="searchForm.channel" placeholder="请选择渠道" clearable>
            <el-option
              v-for="item in channels"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据概览 -->
    <div class="grid grid-cols-4 gap-3">
      <el-card v-for="stat in statistics" :key="stat.label" shadow="hover">
        <div class="flex items-center justify-between">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm">{{ stat.label }}</span>
            <span class="text-2xl font-bold mt-2" :class="stat.color">{{ stat.value }}</span>
            <span class="text-sm text-gray-400 mt-1">
              较上期
              <span :class="stat.trend === 'up' ? 'text-red-500' : 'text-green-500'">
                {{ stat.trend === 'up' ? '+' : '-' }}{{ stat.percentage }}
              </span>
            </span>
          </div>
          <el-icon :size="40" :class="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 图表分析区域 -->
    <div class="grid grid-cols-2 gap-3">
      <!-- 活动效果趋势 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">活动效果趋势</span>
            <el-radio-group v-model="effectMetric" size="small">
              <el-radio-button :value="'participants'">参与人数</el-radio-button>
              <el-radio-button :value="'conversion'">转化率</el-radio-button>
              <el-radio-button :value="'newPatients'">新增患者</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="effectTrendChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- 渠道效果分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">渠道效果分析</span>
            <el-select v-model="channelMetric" size="small" class="w-32">
              <el-option label="参与人数" value="participants" />
              <el-option label="转化率" value="conversion" />
              <el-option label="投资回报率" value="roi" />
            </el-select>
          </div>
        </template>
        <div ref="channelChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- ROI分析 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">投资回报分析</span>
            <el-radio-group v-model="roiTimeRange" size="small">
              <el-radio-button :value="'week'">周</el-radio-button>
              <el-radio-button :value="'month'">月</el-radio-button>
              <el-radio-button :value="'quarter'">季度</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="roiChartRef" class="w-full h-full"></div>
      </el-card>

      <!-- 转化漏斗 -->
      <el-card shadow="hover" class="h-[400px]">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">转化漏斗分析</span>
            <el-select v-model="selectedCampaign" size="small" class="w-48">
              <el-option
                v-for="item in campaigns"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </template>
        <div ref="funnelChartRef" class="w-full h-full"></div>
      </el-card>
    </div>

    <!-- 活动效果排名 -->
    <el-card shadow="hover">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-bold">活动效果排名</span>
          <div class="flex gap-2">
            <el-select v-model="rankingMetric" size="small" class="w-32">
              <el-option label="参与人数" value="participants" />
              <el-option label="转化率" value="conversion" />
              <el-option label="投资回报率" value="roi" />
            </el-select>
            <el-button type="primary" size="small" @click="handleExportRanking">
              导出排名
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="campaignRankings" border stripe>
        <el-table-column type="index" label="排名" width="80" align="center" />
        <el-table-column prop="name" label="活动名称" min-width="150" />
        <el-table-column prop="channel" label="主要渠道" min-width="120" />
        <el-table-column prop="participants" label="参与人数" min-width="120">
          <template #default="{ row }">
            {{ row.participants }}
            <el-tag 
              size="small" 
              :type="row.participantsTrend === 'up' ? 'success' : 'danger'"
              class="ml-2"
            >
              {{ row.participantsTrend === 'up' ? '↑' : '↓' }}{{ row.participantsChange }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="conversion" label="转化率" min-width="120">
          <template #default="{ row }">
            {{ row.conversion }}%
            <el-tag 
              size="small" 
              :type="row.conversionTrend === 'up' ? 'success' : 'danger'"
              class="ml-2"
            >
              {{ row.conversionTrend === 'up' ? '↑' : '↓' }}{{ row.conversionChange }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roi" label="投资回报率" min-width="120">
          <template #default="{ row }">
            {{ row.roi }}%
            <el-tag 
              size="small" 
              :type="row.roiTrend === 'up' ? 'success' : 'danger'"
              class="ml-2"
            >
              {{ row.roiTrend === 'up' ? '↑' : '↓' }}{{ row.roiChange }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="投入成本" min-width="120">
          <template #default="{ row }">
            ¥{{ row.cost }}
          </template>
        </el-table-column>
        <el-table-column prop="revenue" label="产生收入" min-width="120">
          <template #default="{ row }">
            ¥{{ row.revenue }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleViewDetail(row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'


// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 搜索条件
const searchForm = ref({
  dateRange: [],
  campaign: '',
  channel: ''
})

// 营销活动列表
const campaigns = ref([
  { id: '1', name: '春季健康体检' },
  { id: '2', name: '慢病管理计划' },
  { id: '3', name: '儿童疫苗接种' }
])

// 营销渠道列表
const channels = ref([
  { id: '1', name: '微信公众号' },
  { id: '2', name: '短信营销' },
  { id: '3', name: '线下活动' },
  { id: '4', name: '社区宣传' }
])

// 统计数据
const statistics = ref([
  {
    label: '参与总人数',
    value: '2,345',
    icon: 'User',
    color: 'text-blue-500',
    iconColor: 'text-blue-200',
    trend: 'up',
    percentage: '12.5%'
  },
  {
    label: '平均转化率',
    value: '35.8%',
    icon: 'TrendCharts',
    color: 'text-green-500',
    iconColor: 'text-green-200',
    trend: 'up',
    percentage: '5.2%'
  },
  {
    label: '新增患者数',
    value: '856',
    icon: 'Plus',
    color: 'text-orange-500',
    iconColor: 'text-orange-200',
    trend: 'up',
    percentage: '8.3%'
  },
  {
    label: '投资回报率',
    value: '286%',
    icon: 'Money',
    color: 'text-purple-500',
    iconColor: 'text-purple-200',
    trend: 'up',
    percentage: '15.6%'
  }
])

// 图表相关
const effectTrendChartRef = ref(null)
const channelChartRef = ref(null)
const roiChartRef = ref(null)
const funnelChartRef = ref(null)

// 筛选条件
const effectMetric = ref('participants')
const channelMetric = ref('participants')
const roiTimeRange = ref('month')
const selectedCampaign = ref('')
const rankingMetric = ref('participants')

// 活动排名数据
const campaignRankings = ref([
  {
    name: '春季健康体检',
    channel: '微信公众号',
    participants: 856,
    participantsTrend: 'up',
    participantsChange: 12,
    conversion: 38.5,
    conversionTrend: 'up',
    conversionChange: 5,
    roi: 286,
    roiTrend: 'up',
    roiChange: 15,
    cost: '25,600',
    revenue: '73,216'
  },
  {
    name: '慢病管理计划',
    channel: '短信营销',
    participants: 725,
    participantsTrend: 'up',
    participantsChange: 8,
    conversion: 32.6,
    conversionTrend: 'down',
    conversionChange: 2,
    roi: 245,
    roiTrend: 'up',
    roiChange: 10,
    cost: '18,900',
    revenue: '46,305'
  }
])

// 方法
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const handleReset = () => {
  searchForm.value = {
    dateRange: [],
    campaign: '',
    channel: ''
  }
}

const handleExportRanking = () => {
  ElMessage.success('导出功能待实现')
}

const handleViewDetail = (row) => {
  ElMessage.success('查看详情功能待实现')
}

onMounted(() => {
})
</script>

<style scoped>

</style>
